<template>
    <!-- 标签页卡片，支持动态添加和关闭 -->
    <el-tabs
        v-model="editableTabsValue"
        type="card"
        class="demo-tabs"
        @tab-remove="removeTab"
        @tab-click="skip"
    >
        <el-tab-pane
            v-for="item in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
            :closable="!isHomePage(item)"
        >
            <!-- 嵌套路由页面 -->
            <router-view></router-view>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup>
// 引入依赖
import { ref, watch } from 'vue'
import { ElTabs, ElTabPane } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'

// 标签页索引
let tabIndex = 2
// 当前激活的标签页
const editableTabsValue = ref('1')
// 标签页数据
const editableTabs = ref([
    {
        title: '首页',
        name: '1',
        path: '/dashboard'
    }
])

// 路由路径与标题映射
const pathMapping = {
    dashboard: '首页',
    user: '用户管理',
    role: '角色管理',
    content: '内容管理',
    data: '数据管理',
    system: '系统管理',
    settings: '系统设置',
    logs: '日志管理',
    profile: '个人中心',
    edit: '内容详情',
    detail: '数据详情'
}

const route = useRoute()
const router = useRouter()

// 添加新标签页
const addTab = () => {
    const newTabName = `${++tabIndex}`
    // 取路由最后一级的 key，映射为标题
    const newTabTitle = pathMapping[route.path.split('/').filter(item => isNaN(+item)).pop()] || '未知'
    const existingTab = editableTabs.value.find((tab) => tab.title === newTabTitle)
    // 判断是否已存在相同标题的标签页
    if (existingTab) {
        editableTabs.value.forEach(item => {
            if (item.title === existingTab.title) {
                item.path = route.path
            }
        })
        editableTabsValue.value = existingTab.name
    } else {
        editableTabs.value.push({
            title: newTabTitle,
            name: newTabName,
            path: route.path
        })
        editableTabsValue.value = newTabName
    }
}

// 监听路由变化，自动添加标签页
watch(() => route.path, () => {
    addTab()
}, { immediate: true })

// 移除标签页
const removeTab = targetName => {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
        const index = tabs.findIndex((tab) => tab.name === targetName)
        if (index > 0) {
            activeName = tabs[index - 1].name
        } else if (tabs.length > 1) {
            activeName = tabs[1].name
        } else {
            activeName = tabs[0].name
        }
    }
    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
    // 切换到当前激活的标签页对应的路由
    editableTabs.value.forEach(item => {
        if (item.name === editableTabsValue.value) {
            router.push(item.path)
        }
    })
}

// 判断是否为首页标签
const isHomePage = (tab) => tab.name === '1'

// 标签页点击时跳转到对应路由
function skip(i) {
    editableTabs.value.forEach(item => {
        if (item.name === i.props.name) {
            router.push(item.path)
        }
    })
}
</script>

<style>
/* 标签页内容样式 */
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

/* 标签页整体样式 */
.demo-tabs {
    width: 100%;
    height: 100%;
}
</style>